<template>
  <div @click="yingchang">
    <!-- 右键功能 -->
    <transition name="el-fade-in-linear">
      <div
        class="gonNen"
        v-show="isshou"
        :style="{ left: gonna.letX + 'px', top: gonna.letY + 'px' }"
      >
        <ul>
          <li border="0" style="cursor: pointer">
            <div class="conten">
              <div class="img">
                <img src="../../assets/tubiao/pl.png" alt="" />
              </div>
              <span>查看评论(200000)</span>
            </div>
          </li>
          <li border="0" style="cursor: pointer" @click="onplay">
            <div class="conten">
              <div class="img">
                <img src="../../assets/tubiao/24gl-playCircle.png" alt="" />
              </div>
              <span>播放</span>
            </div>
          </li>
          <li border="0" style="cursor: pointer" @click="xiayspla">
            <div class="conten">
              <div class="img">
                <img src="../../assets/tubiao/asd.png" alt="" />
              </div>
              <span>下一首播放</span>
            </div>
          </li>
          <li border="0" style="cursor: pointer">
            <div class="conten">
              <div class="img">
                <img src="../../assets/tubiao/scj.png" alt="" />
              </div>
              <span>添加收藏夹</span>
            </div>
          </li>
          <li border="0" style="cursor: pointer">
            <div class="conten">
              <div class="img">
                <img src="../../assets/tubiao/fx.png" alt="" />
              </div>
              <span>分享</span>
            </div>
          </li>
          <li border="0" style="cursor: pointer">
            <div class="conten">
              <div class="img">
                <img src="../../assets/tubiao/xz.png" alt="" />
              </div>
              <span>下载</span>
            </div>
          </li>
        </ul>
      </div>
    </transition>
    <!-- 右键功能结束 -->
    <div class="gonn">
      <ul class="tobu">
        <li class="daohantilti">
          <ul>
            <li>
              <div class="caozuo">
                <span> 操作 </span>
              </div>
              <div class="biaolites">
                <el-row>
                  <el-col :span="10"
                    ><div class="grid-content bg-purple">
                      <span>标题</span>
                    </div></el-col
                  >
                  <el-col :span="5"
                    ><div class="grid-content bg-purple-light">
                      <span> 歌手 </span>
                    </div></el-col
                  >
                  <el-col :span="6"
                    ><div class="grid-content bg-purple">
                      <span>专辑 </span>
                    </div></el-col
                  >
                  <el-col :span="3"
                    ><div class="grid-content bg-purple-light">
                      <span> 时间</span>
                    </div></el-col
                  >
                </el-row>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div @mousemove="touchmove">
      <transition-group
        name="more"
        v-bind:css="false"
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
      >
        <div
          class="geqlbiao"
          v-for="(item, index) in info.jieliuData"
          :key="index"
          v-bind:data-index="item"
          @dblclick="shishiClick(index)"
          @contextmenu.prevent="show(index)"
        >
          <ul class="tobu">
            <li class="daohantilti">
              <ul>
                <li
                  :class="[index % 2 == 0 ? 'bage' : '']"
                  border="0"
                  style="cursor: pointer"
                >
                  <div class="gonn">
                    <span class="xiabiao"> {{ (index + 1) | xiabiao }}</span>
                    <div
                      class="xing"
                      v-if="likelistDataid.indexOf(item.id) != -1"
                    >
                      <img src="../../assets/sxa.png" alt="" />
                    </div>
                    <div class="xing" v-else>
                      <img src="../../assets/max.png" alt="" />
                    </div>
                    <div class="xingx">
                      <img src="../../assets/xaizdw.png" alt="" />
                    </div>
                  </div>
                  <div class="geqxing">
                    <el-row>
                      <el-col :span="10"
                        ><div class="grid-content bg-purple">
                          <span v-if="info.jieliuData[0]"
                            >{{ item.name }}
                          </span>
                        </div>
                        <div class="hyuan" v-show="item.fee == 1">
                          <img src="../../assets/hy.png" alt="" />
                        </div>
                      </el-col>
                      <el-col :span="5"
                        ><div class="grid-content bg-purple-light">
                          <!-- <span v-for="(i, x) in item.ar" :key="x">
                          <span>
                            {{ i.name }}
                          </span>
                        </span> -->

                          <span>{{ item.ar | niemw }}</span>
                        </div></el-col
                      >
                      <el-col :span="6"
                        ><div class="grid-content bg-purple">
                          <span>{{ item.al.name }}</span>
                        </div></el-col
                      >
                      <el-col :span="3"
                        ><div class="grid-content bg-purple-light">
                          <span v-if="index == 0">
                            {{ item.dt | onindes }}
                          </span>
                          <span v-else> {{ item.dt | dates }} </span>
                        </div></el-col
                      >
                    </el-row>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
import API from "../../http/API";
export default {
  props: [""],
  data() {
    return {
      //动画
      show3: false,
      //节流前的数据
      datas: [],
      info: {
        jieliuData: [],
      },
      //显示功能
      isshou: false,

      dinfsq: "",
      messages: [],
      //喜欢的音乐
      likelistDataid: [],
      //移动事件的定时器
      //鼠标在他移动的位置中显示
      gonna: {
        letY: 500,
        letX: 500,
      },
      hmgonna: {
        letY: 500,
        letX: 500,
      },

      YdDingsq: [],
      xiaogon: [],
      isxhuan: 0,

      //保存当前右键的下标
      rightClickIindex: 0,
    };
  },
  activated() {},
  created() {
    console.log("加载");
    // console.log(this.$route.query.id);
    // this.mylinke();
    this.http();
  },
  mounted() {
    setTimeout(() => {
      this.show3 = !this.show3;
    });
  },
  methods: {
    // 添加进歌单

    addGeDan() {
      var newArray = array1.filter(function (item) {
        return array2.indexOf(item) == -1;
      });
    },

    http() {
      // console.log(this.$route.query.id);
      this.$get(API.PLAYLIST_DETAIL, {
        id: this.$route.query.id,
      })
        .then((data) => {
          // console.log(data);
          if (data.code == 200) {
            this.messages = data.playlist;

            //拿到当前数据的歌单有多少歌曲
            this.fenliu().then(() => {
              // console.log(this.datas.songs);
              if (this.datas.songs.length >= 30) {
                if (this.$store.state.denglo == true) {
                  this.mylinke();
                } else {
                  this.fenl();
                }
              } else {
                this.info.jieliuData = JSON.parse(
                  JSON.stringify(this.datas.songs)
                );
              }
            });
          }
        })
        .catch((err) => {});
    },

    //分流处理
    async fenliu() {
      this.ID = [];
      if (this.messages.trackCount > 1000) {
        //当歌单大于1000的时候要循环或多少次达到歌单歌曲数量

        return this.geqxin(1000).then((id) => {
          // console.log(id);

          return this.$get(API.SONG_DETAIL, {
            ids: id,
          }).then((e) => {
            // console.log(e);
            this.datas = [];
            this.datas = e;
          });
        });
      } else {
        return this.geqxin(this.messages.trackIds.length).then((id) => {
          // console.log(id);
          return this.$get(API.SONG_DETAIL, {
            ids: id,
          }).then((e) => {
            // console.log(e);
            this.datas = [];

            this.datas = e;
            // console.log(this.datas)
          });
        });
      }
    },

    async geqxin(e) {
      // console.log(e);
      let is = [];
      let index = this.isxhuan;
      for (; index < e; index++) {
        is.push(this.messages.trackIds[index].id);
      }
      is = is.toString();
      return is;
    },

    //拿到喜欢达到歌曲的id
    mylinke() {
      let id = JSON.parse(localStorage.getItem("User"));
      // console.log(id.account.id);
      this.$post(API.LIKELIST, {
        id: id.account.id,
      })
        .then((e) => {
          // console.log(e);
          if (e.code == 200) {
            this.likelistDataid = e.ids;

            if (this.likelistDataid < 1000) {
              localStorage.setItem("likelistDataid", JSON.stringify(e.ids));
            } else {
              localStorage.setItem(
                "likelistDataid",
                JSON.stringify(this.likelistDataid.slice(0, 1000))
              );
            }

            // this.datas = JSON.parse(localStorage.getItem("song"));

            // console.log(this.datas);
            this.fenl();
          }
          //   this.muinlikes();
        })
        .catch((err) => {
          // console.log(err);
        });
    },

    //鼠标移动事件
    touchmove(e) {
      clearInterval(this.YdDingsq);

      //进行判断
      let wodn = document.body.scrollHeight;
      let kuan = document.body.scrollWidth;
      // console.log(document.body.scrollHeight);
      // console.log(document.body.scrollWidth + "宽度");
      if (this.isshou == false) {
        // 获取x 坐标
        // console.log(e.clientX + "X");
        // // 获取y 坐标
        // console.log(e.clientY + "Y");

        if (wodn - e.clientY < 400) {
          // console.log(e.clientY + "Yxiao");

          this.gonna.letY = e.clientY - 365;

          if (kuan - e.clientX < 300) {
            this.gonna.letX = e.clientX - 450;
          } else {
            this.gonna.letX = e.clientX - 180;
          }
        } else {
          // this.gonna.letX = e.clientX - 200;
          if (kuan - e.clientX < 300) {
            this.gonna.letX = e.clientX - 450;
          } else {
            this.gonna.letX = e.clientX - 180;
          }
          this.gonna.letY = e.clientY - 50;
        }
      } else {
        if (wodn - e.clientY < 400) {
          // console.log("已经显示了");
          // = e.clientX - 200;
          if (kuan - e.clientX < 300) {
            this.hmgonna.letX = e.clientX - 450;
          } else {
            this.hmgonna.letX = e.clientX - 180;
          }
          this.hmgonna.letY = e.clientY - 335;
        } else {
          if (kuan - e.clientX < 300) {
            this.hmgonna.letX = e.clientX - 450;
          } else {
            this.hmgonna.letX = e.clientX - 180;
          }
          this.hmgonna.letY = e.clientY - 50;
        }
      }

      // alert("li")
    },
    //双击把歌单里面的歌曲放到播放器里面去
    shishiClick() {},
    //下一首播放
    xiayspla() {
      if (this.rightClickIindex == 0) {
        this.info.jieliuData[this.rightClickIindex].lentdate = true;
      }

      localStorage.setItem(
        "liTheFollowingPiece",
        JSON.stringify(this.info.jieliuData[this.rightClickIindex])
      );

      this.$store.commit("onTheFollowingPiece");
    },
    //播放当前选中的歌
    onplay() {
      if (this.rightClickIindex == 0) {
        this.info.jieliuData[this.rightClickIindex].lentdate = true;
      }

      localStorage.setItem(
        "Playimmediately",
        JSON.stringify(this.info.jieliuData[this.rightClickIindex])
      );
      this.$store.commit("onPlayimmediately");
    },
    //右键显示歌曲
    show(index) {
      console.log(index);
      this.rightClickIindex = index;

      if (this.isshou == true) {
        if (
          this.gonna.letX != this.hmgonna.letX &&
          this.gonna.letY != this.hmgonna.letY
        ) {
          this.isshou = false;
          this.gonna.letX = this.hmgonna.letX;
          this.gonna.letY = this.hmgonna.letY;
        }
      }
      this.isshou = true;
    },
    //单击隐藏属性显示
    yingchang() {
      if (this.isshou == true) {
        this.isshou = false;
      }
    },
    //动画钩子
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      // console.log(el.dataset.index)
      let delay = el.dataset.index * 100;
      setTimeout(() => {
        el.style.transition = "opacity 0.4s ";
        el.style.opacity = 1;
        el.style.animation = "one-in 0.4s infinite";
        el.style["animation-iteration-count"] = 1;
        done();
      }, delay);
    },
    //渲染发了
    fenl() {
      this.info.jieliuData = [];
      // console.log(this.datas.songs);
      this.dsqers(this.datas.songs, 30).then((e) => {
        // console.log(e);

        // console.log(this.info.jieliuData);
        let index = 0;
        this.info.jieliuData = this.info.jieliuData.concat(e[index]);
        // console.log( this.info.jieliuData)
        this.$nextTick(() => {
          this.dinfsq = setInterval(() => {
            index++;

            this.info.jieliuData = this.info.jieliuData.concat(e[index]);
            // console.log(this.jieliuData);
            if (this.info.jieliuData.length == this.datas.songs.length) {
              console.log("关闭");
              // console.log(this.info.jieliuData);
              return clearInterval(this.dinfsq);
            }
          }, 550);
          this.$forceUpdate();
        });

        //定时器执行
      });
    },
    //节流处理
    async dsqers(arr, num) {
      // console.log(arr);
      //arr是你要分割的数组，num是以几个为一组
      let newArr = []; //首先创建一个新的空数组。用来存放分割好的数组
      for (let i = 0; i < arr.length; ) {
        //注意：这里与for循环不太一样的是，没有i++
        arr[i].dt = parseInt(arr[i].dt / 1000);
        newArr.push(arr.slice(i, (i += num)));
      }
      return newArr;
    },

    // let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    // console.log(spArr(arr, 4))
  },
  beforeDestroy() {
    //歌单信息
  },
  destoryed() {
    clearInterval(this.dinfsq);
    //动画
    this.show3 = false;
    //节流前的数据
    this.datas = [];

    //临时保存数据的地方也就是返回来的url

    //拿到返回来歌曲url

    //定时器

    //节流数据
    //节流数据处理

    //拿到的url

    this.shuliang = 30;
    this.onindex = 0;
    //节流的数据
    this.info.jieliuData = [];
    this.$store.commit("geui", []);
  },
  filters: {
    dates(mss) {
      var days = parseInt(mss / (1000 * 60 * 60 * 24));
      var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.round((mss % (1000 * 60)) / 1000);

      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      return minutes + ":" + seconds;
    },
    xiabiao(index) {
      if (index < 10) {
        index = "0" + index;
      }
      return index;
    },
    onindes(indes) {
      const h = parseInt(indes / 3600);
      const minute = parseInt((indes / 60) % 60);
      const second = Math.ceil(indes % 60);

      const hours = h < 10 ? "0" + h : h;
      const formatSecond = second > 59 ? 59 : second;
      return `${hours > 0 ? `${hours}:` : ""}${
        minute < 10 ? "0" + minute : minute
      }:${formatSecond < 10 ? "0" + formatSecond : formatSecond}`;
    },
    niemw(val) {
      // console.log(val)
      if (val.length == 1) {
        // console.log(val[0].name)
        return val[0].name;
      } else {
        let name;
        for (let index = 0; index < val.length; index++) {
          if (index == 0) {
            name = val[index].name;
          } else {
            name += "/" + val[index].name;
          }
        }
        return name;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.el-col {
  display: flex;
  align-items: center;
}
.hyuan {
  margin-left: 15px;
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 100%;
    height: 100%;
  }
}
.gonNen {
  position: absolute;
  z-index: 5;
  height: 275px;
  width: 250px;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  // border: 1px solid #000;
  box-shadow: 0 0 10px rgba(73, 73, 73, 0.616);
  ul {
    margin-top: 15px;
    li {
      height: 42px;
      // border: 1px solid #000;
      &:hover {
        background-color: rgba(211, 211, 211, 0.445);
      }
      .conten {
        margin-left: 10px;
        margin-right: 10px;
        // border: 1px solid #000;
        height: 100%;
        display: flex;
        align-items: center;
        .img {
          height: 20px;
          width: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      &:nth-child(1) {
        .conten {
          margin-left: 10px;
          margin-right: 10px;
          // border: 1px solid #000;
          height: 100%;
          display: flex;
          align-items: center;
          .img {
            height: 19px;
            width: 19px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      &:nth-child(3) {
        border-bottom: 1px solid rgb(212, 212, 212);
      }
      &:nth-child(4) {
        .conten {
          margin-left: 10px;
          margin-right: 10px;
          // border: 1px solid #000;
          height: 100%;
          display: flex;
          align-items: center;
          .img {
            height: 19px;
            width: 19px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            margin-left: 1px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}

.xiabiao {
  width: 36px;
}
@keyframes one-in {
  from {
    padding-top: 100px;
    height: 0%;
  }
  to {
    padding-top: 0px;
    height: 100%;
  }
}

.bage {
  background-color: rgba(218, 218, 218, 0.363);
}
.gonn {
  .tobu {
    height: 40px;
    // border: 1px solid #000;
    //   width: 100%;

    margin-left: 50px;
    .daohantilti {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;

      ul {
        width: 100%;
        height: 100%;
        display: flex;
        li {
          width: 100%;
          //   border: 1px solid #000;
          display: flex;
          .caozuo {
            width: 80px;
            margin-right: 10px;
            // border: 1px solid #000;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgb(160, 158, 158);
          }
          .biaolites {
            flex: 1;
            // border: 1px solid #000;
            color: rgb(160, 158, 158);
            .el-row {
              margin-bottom: 20px;
              &:last-child {
                margin-bottom: 0;
              }
            }
            .el-col {
              border-radius: 4px;
            }
            .bg-purple-dark {
              // background: #99a9bf;
            }
            .bg-purple {
              // background: #d3dce6;
            }
            .bg-purple-light {
              // background: #e5e9f2;c
            }
            .grid-content {
              // margin-left: 5px;
              display: flex;
              align-items: center;
              span {
                margin-left: 5px;
              }

              // border-radius: 4px;
              min-height: 36px;
            }
            .row-bg {
              padding: 10px 0;
              // background-color: #f9fafc;
            }
          }
        }
      }
    }
  }
}

.geqlbiao:hover {
  background-color: rgba(202, 201, 201, 0.363);
}
.geqlbiao {
  .tobu {
    height: 35px;
    // border: 1px solid #000;
    //   width: 100%;

    // margin-left: 50px;
    .daohantilti {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      ul {
        width: 100%;
        height: 100%;
        display: flex;
        // flex-direction: column;
        li {
          width: 100%;
          //   border: 1px solid #000;
          display: flex;

          .gonn {
            display: flex;
            align-items: center;
            width: 130px;
            margin-right: 10px;
            // border: 1px solid #000;
            height: 100%;
            span {
              margin-left: 10px;
              color: rgb(143, 142, 142);
              &:nth-child(1) {
                margin-left: 42px;
                // border: 1px solid #000;
              }
            }
            .xing {
              //   margin-left: 30px;
              width: 20px;
              height: 20px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .xingx {
              margin-left: 13px;
              width: 17px;
              height: 17px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .geqxing {
            flex: 1;
            color: rgb(73, 71, 71);
            .el-row {
              height: 100%;
              //   margin-bottom: 20px;
              &:last-child {
                margin-bottom: 0;
              }
            }
            .el-col {
              height: 100%;
            }
            .bg-purple-dark {
              // background: #99a9bf;
            }
            .bg-purple {
              // background: #d3dce6;
            }
            .bg-purple-light {
              // background: #e5e9f2;
            }
            .grid-content {
              display: flex;
              align-items: center;
              height: 100%;
              //   border-radius: 4px;
              //   min-height: 36px;
              span {
                margin-left: 5px;
                color: rgb(88, 86, 86);
                white-space: nowrap;
                white-space: nowrap;
                /*溢出部分文字隐藏*/
                overflow: hidden;
                /*溢出部分省略号处理*/
                text-overflow: ellipsis;
                span {
                  margin-right: 10px;
                }
              }
              //       width: 150px;
              // height: 80px;
              // background-color: pink;
              // margin: 100px auto;
              /*强制文字在一行文本框内*/
              white-space: nowrap;
              /*溢出部分文字隐藏*/
              overflow: hidden;
              /*溢出部分省略号处理*/
              text-overflow: ellipsis;
            }
            .row-bg {
              padding: 10px 0;
              // background-color: #f9fafc;
            }
          }
        }
      }
    }
  }
}
</style>